<template>
    <div class="callback-patch">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="account">
                <el-input v-model="form.account" prefix-icon="icon iconfont icon-user" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="mobile">
                <el-input v-model="form.mobile" prefix-icon="icon iconfont icon-phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input v-model="form.code" prefix-icon="icon iconfont icon-code" placeholder="请输入验证码">
                    <el-button slot="append" @click="send">{{time===0?'发送验证码':`${time}秒后发送`}}</el-button>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password" prefix-icon="icon iconfont icon-lock" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item prop="rePassword">
                <el-input v-model="form.rePassword" prefix-icon="icon iconfont icon-lock"
                          placeholder="请确认密码"></el-input>
            </el-form-item>
        </el-form>
        <a href="javascript:;" class="submit" @click="userQQPatchLogin">立即提交</a>
    </div>
</template>

<script>
    import {useIntervalFn} from "@vueuse/shared";
    import {userQQPatchCode, userQQPatchLogin} from "@/api/user";

    export default {
        name: "CallbackPatch",
        props: {
            unionId: {
                type: String,
                default: ''
            }
        },
        data() {
            const checkMobile = (rule, value, callback) => {
                if (!/^1[3-9]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式不正确'));
                }
                callback();
            };
            const checkPwd = (rule, value, callback) => {
                if (value !== this.form.password) {
                    callback(new Error('密码与确认密码不一致'));
                }
                callback();
            };
            return {
                time: 0,
                resume: null,
                form: {
                    account: null,
                    mobile: null,
                    code: null,
                    password: null,
                    rePassword: null
                },
                rules: {
                    account: [{required: true, message: '请输入用户名', trigger: 'blur'},],
                    mobile: [{required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: checkMobile, trigger: 'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'},],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'},],
                    rePassword: [{required: true, message: '请确认密码', trigger: 'blur'},
                        {validator: checkPwd, trigger: 'blur'}],

                }

            }
        },
        created() {
            const {pause, resume} = useIntervalFn(() => {
                this.time--
                if (this.time < 1) {
                    pause()
                }
            }, 1000, false)
            this.resume = resume
        },
        methods: {

            send() {
                if (this.time !== 0) {
                    return
                }
                this.$refs.form.validateField('mobile', async (str) => {
                    if (str.length === 0) {
                        await userQQPatchCode(this.form.mobile)
                        this.time = 60
                        this.$message.success('短信发送成功，请注意查收')
                        this.resume()
                    }
                })
            },
            userQQPatchLogin() {

                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        const {result} = await userQQPatchLogin({
                            unionId: this.unionId,
                            ...this.form
                        })
                        this.$store.commit('user/setUser', result)
                        this.$router.push(this.$store.state.user.redirectUrl)
                    }
                })

            }
        }
    }
</script>

<style scoped lang="less">
    .callback-patch {
        width: 320px;
        margin: 0 auto;

        .submit {
            width: 320px;
            height: 50px;
            border-radius: 4px;
            background: @xtxColor;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            display: block;
            margin: 0 auto;
        }
    }

</style>